<template v-if="formControl">
	<view :style="formControl.style" class="lib-component__selector">
		<lib-selector-label ref="libSelectorLabelRef" :formControl="formControl" />
		<view class="lib-component__selector-content">
			<view class="selector-box textarea-box" :style="formControl.selectorStyle">
				<textarea :value="value" @input="inputChange" :placeholder="formControl.placeholder" :controlled="true" :maxlength="200" class="textarea"></textarea>
			</view>
		</view>
	</view>
</template>

<script>
	import libSelectorLabel from '../lib-selector-label/lib-selector-label.vue';
	export default {
		name: 'lib-selector-textarea',
		components:{
			libSelectorLabel,
		},
		emit: [],
		props: {
			formControl: {
				type: Object,
				default: () => {
					return null;
				},
				required: true,
			}
		},
		data() {
			return {
				value: null,
			}
		},
		methods: {
			init() {
				this.value = this.formControl.value;
				this.formControl.valueChange((value)=>{
					this.value = value;
				});
			},
			inputChange(e) {
				const value = e.detail.value;
				this.value = value;
				this.formControl.value = value;
			},
			clear() {
				this.formControl.value = '';
				this.value = '';
			},
		},
		mounted() {
			this.init();
			// console.log(this.formControl);
		},
		watch: {},
	}
</script>




<style lang="scss" scoped>
	@import "../selector.scss";
</style>